<template>
  <el-button @click="exp">导出excel</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="proname" label="商品名称" />
    <el-table-column prop="brand" label="商品品牌" />
    <el-table-column prop="category" label="商品分类" />
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect, reactive } from "vue";
import { proListApi, proSearchApi, getCategoryApi } from "@/api/pro";

import ExportJsonExcel from "js-export-excel";

const tableData = ref([]);

onMounted(async () => {
  const res = await proListApi();
  res && (tableData.value = res.data);
});

const exp = () => {
  var option: any = {};

  option.fileName = "excel";

  option.datas = [
    {
      sheetData: tableData.value,
      sheetName: "商品列表",
      sheetFilter: ["proname", "brand", "category"],
      sheetHeader: ["商品名称", "商品品牌", "商品分类"],
      columnWidths: [20, 20, 20],
    },
  ];

  var toExcel = new ExportJsonExcel(option); //new
  toExcel.saveExcel(); //保存
};
</script>
